<!-- Most web features like animations, videos, or Google reCAPTCHA work fine in Blazor Hybrid.
However, since Blazor Hybrid uses Web View with an IP-based Origin (http://0.0.0.1)
more sensitive features like Social Sign-in and Face-ID/Fingerprint Sign-in using WebAuthn do not function properly in Web View.
To address this, within a Blazor Hybrid App, you can use a Local HTTP Server to load a lightweight WebInteropApp component that
only loads app.js (without Blazor.web.js) on an Origin like localhost.
Then, using IExternalNavigationService, you can display it via an In-App Browser to bypass Web View limitations.

Additionally, in a Web Browser, if Social Sign-in is performed in a Popup or a new Tab to preserve the app's
state and avoid restarting Blazor upon returning from Social Sign-in, the Popup should redirect back to WebInteropApp
after authentication. Using app.js, it can notify the main Window via window.opener.postMessage({ key: 'PUBLISH_MESSAGE', ... }),
allowing the main Window to resume its operations.

When publishing Client.Web (BlazorWebAssembly Standalone) and Server.Api, there won't be any WebInteropAppEndpoint,
in this case, uncomment the Route attribute below to make this component accessible via /web-interop-app route. -->

<html>
<head>
    <base href="/" />
    <title>Boilerplate</title>
    <link rel="icon" href="">
    <style>
        html {
            height: 100%;
        }

        body {
            background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);
        }

        .title {
            left: 50%;
            font-size: 24px;
            color: #EFEFFA;
            position: absolute;
            text-align: center;
            top: calc(50% + 100px);
            transform: translate(-50%, -50%);
            font-family: 'Courier New', Courier, monospace;
        }

        .loader {
            top: 50%;
            left: 50%;
            width: 96px;
            height: 96px;
            position: absolute;
            perspective: 800px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        .inner {
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 50%;
            box-sizing: border-box;
        }

            .inner.one {
                top: 0%;
                left: 0%;
                border-bottom: 3px solid #EFEFFA;
                animation: rotate-one 1s linear infinite;
            }

            .inner.two {
                top: 0%;
                right: 0%;
                border-right: 3px solid #EFEFFA;
                animation: rotate-two 1s linear infinite;
            }

            .inner.three {
                right: 0%;
                bottom: 0%;
                border-top: 3px solid #EFEFFA;
                animation: rotate-three 1s linear infinite;
            }

        @keyframes rotate-one {
            0% {
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
            }
        }

        @keyframes rotate-two {
            0% {
                transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
            }
        }

        @keyframes rotate-three {
            0% {
                transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="title">Please wait</div>

    <div class="loader">
        <div class="inner one"></div>
        <div class="inner two"></div>
        <div class="inner three"></div>
    </div>

    <script src="_content/Bit.Butil/bit-butil.js"></script>
    <script src="_content/Boilerplate.Client.Core/scripts/app.js"></script>
    <script type="text/javascript">
        WebInteropApp.run();
    </script>
</body>
</html>